<template>
  <div>
    <div class="item-line">
      <div>输入/输出变量</div>
      <div
        v-if="data.inputList && data.inputList.length > 0"
        class="param-item"
      >
        <div class="param-name">变量名称</div>
        <div class="param-source">变量来源</div>
        <div class="param-operate">操作</div>
      </div>
      <div
        v-for="(param, index) in data.inputList"
        :key="index"
        class="param-item"
      >
        <div class="param-name">
          <ac-input v-model="param.name" />
        </div>
        <div class="param-source">
          <ac-select
            v-model="param.sourceParamId"
            :options="sourceParamOptions"
          />
        </div>
        <div class="param-operate">
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteParam(index)"
          />
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addParam">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加变量
      </div>
    </div>
    <div class="item-line">
      <div>
        <span style="margin-right: 10px">返回文本</span>
        <ac-switch v-model="data.ifText" :options="[{key: '1'}, {key: '0'}]" />
      </div>
      <div class="inline" v-if="data.ifText === '1'">
        <el-input
          v-model="data.content"
          type="textarea"
          :rows="5"
          v-suggest="options"
          placeholder="请输入返回文本内容，输入“/”可以选择变量"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import tool from "@/utils/tool";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        inputList: []
      }
    }
  },
  sourceParamOptions: {
    type: Object,
    default: () => {}
  }
});

const data = ref(props.data);

const addParam = () => {
  if (!data.value.inputList) {
    data.value.inputList = [];
  }
  data.value.inputList.push({id: tool.uuid()});
};

const deleteParam = (index) => {
  data.value.inputList.splice(index, 1);
};

const options = computed(() => {
  return (data.value.inputList || [])
    .filter(item => item.name)
    .map(item => ({key: `{{${item.name}}}`, value: item.name}));
});
</script>

<style scoped>
.item-line {
  margin-top: 15px;
  >div:first-child {
    margin-bottom: 5px;
  }
}
.param-item {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  .param-name {
    width: 200px;
    flex-shrink: 0;
  }
  .param-source {
    flex-grow: 1;
  }
  .param-operate {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .ac-icon {
      cursor: pointer;
    }
  }
}
.button-box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .button {
    color: #67C23A;
    cursor: pointer;
    display: flex;
    align-items: center;
    .ac-icon {
      margin-right: 8px;
    }
  }
}
.inline {
  display: flex;
}
.input-name {
  margin-top: 5px;
  cursor: pointer;
  text-indent: 14px;
}
</style>